<template>
	<el-container>
		<el-aside width="220px">
			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['日志状态']"
					 current-node-key="日志状态" :highlight-current="true" :expand-on-click-node="false" @node-click="treeClick">
			</el-tree>
		</el-aside>
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="right-panel">

						</div>
					</el-header>
					<el-header style="height:150px;">
						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
					</el-header>
					<el-main class="nopadding">
						<scTableGdshop ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="状态" prop="level" width="60">
								<template #default="scope">
									<el-icon v-if="scope.row.return_code < 0" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
									<el-icon v-if="scope.row.return_code > 0" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
									<el-icon v-if="scope.row.return_code === 0" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
								</template>
							</el-table-column>
							<el-table-column label="请求方法" prop="method_type" width="80"></el-table-column>
							<el-table-column label="请求接口" prop="route"></el-table-column>
							<el-table-column label="用户ID" prop="user_id"></el-table-column>
							<el-table-column label="客户端IP" prop="ip" width="150"></el-table-column>
							<el-table-column label="日志时间" prop="in_at" width="170">
								<template #default="scope">
									<span>{{  $TOOL.dateFormat(scope.row.in_at) }}</span>
								</template>
							</el-table-column>
						</scTableGdshop>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import scEcharts from '@/components/scEcharts'

	export default {
		name: 'log',
		components: {
			info,
			scEcharts
		},
		data() {
			return {
				infoDrawer: false,
				logsChartOption: {
					color: ['#409eff','#e6a23c','#f56c6c'],
					grid: {
						top: '0px',
						left: '10px',
						right: '10px',
						bottom: '0px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					{
						data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					{
						data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					}]
				},
				category: [
					{
						label: '日志状态',value: 'all',
						children: [
							{label: '正常',value: 'normal'},
							{label: '逻辑错误',value: 'logic'},
							{label: '系统错误',value: 'system'},
						]
					}
				],
				date: [],
				apiObj: this.$API.gdshop.log,
				search: {
					keyword: ""
				}
			}
		},
		methods: {
			upsearch(){

			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			treeClick(row) {
				console.log(row)
			}
		}
	}
</script>

<style>
</style>
